<!DOCTYPE html>
<html lang="en">
<head>
    #include("./include/header.html")
</head>
<body>

<div class="container-fluid">
    #include("./include/menu.html")
    <div class="row">
        <div class="col-md-2">
            <div class="tabbable" id="tabs-393833">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-module" data-toggle="tab"><i class="fa fa-folder-open-o" aria-hidden="true"></i>
                            模块</a>
                    </li>
                    <li>
                        <a href="#panel-history" data-toggle="tab"><i class="fa fa-history" aria-hidden="true"></i>
                            历史</a>
                    </li>

                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-module">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion"
                                           href="#collapseOne">
                                            1
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        12
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion"
                                           href="#collapseTwo">
                                            2
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        12
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="tab-pane" id="panel-history">
                        <ul class="list-group">
                            <li class="list-group-item">免费域名注册</li>
                            <li class="list-group-item">每年更新成本</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        请求信息
                                    </h3>
                                </div>

                                <div class="panel-body">
                                    <div class="row">
                                        <form class="form-inline col-md-12" role="form">
                                            <div class="form-group">
                                                <select class="form-control" name="method">
                                                    <option>POST</option>
                                                    <option>GET</option>
                                                    <option>DELETE</option>
                                                    <option>PUT</option>
                                                    <option>OPTION</option>
                                                </select>
                                            </div>
                                            <div id="sendForm" class="form-group">
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <input name="url" type="text" class="form-control"
                                                               style="width: 400px;"
                                                               placeholder="请输入URL">
                                                        <span class="input-group-btn">
                                                    <button id="sendBtn" type="button" class="btn btn-primary"><i
                                                            class="fa fa-refresh"
                                                            aria-hidden="true"></i> Send</button>
                                                </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                    <div class="row" style="margin-top: 20px">
                                        <div class="col-md-12">
                                            <div class="tabbable" id="tabs-393832">
                                                <ul class="nav nav-tabs">
                                                    <li class="active">
                                                        <a href="#panel-desc" data-toggle="tab">Description</a>
                                                    </li>
                                                    <li>
                                                        <a href="#panel-headers" data-toggle="tab">Headers</a>
                                                    </li>
                                                    <li class="">
                                                        <a href="#panel-params" data-toggle="tab">URL Params</a>
                                                    </li>
                                                    <li class="">
                                                        <a href="#panel-body" data-toggle="tab">Body</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane fade in active" id="panel-desc">
                                                        <textarea id="desc" name="desc" class="form-control"
                                                                  placeholder="请输入接口描述" rows="3"></textarea>
                                                    </div>
                                                    <div class="tab-pane fade " id="panel-headers">
                                                        <table id="table-headers" class="table table-hover">
                                                            <thead>
                                                            <tr>
                                                                <th>键</th>
                                                                <th>值</th>
                                                                <th>操作</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>Sachin</td>
                                                                <td>Mumbai</td>
                                                                <td>400003</td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="tab-pane fade" id="panel-params">
                                                        <table id="table-params" class="table table-hover">
                                                            <thead>
                                                            <tr>
                                                                <th>键</th>
                                                                <th>值</th>
                                                                <th>操作</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>Sachin</td>
                                                                <td>Mumbai</td>
                                                                <td>400003</td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="tab-pane fade" id="panel-body">
                                                        <div class="form-group">
                                                            <textarea id="body" name="body" class="form-control"
                                                                      placeholder="请输入body" rows="3"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <div class="panel-footer">
                                    请求页脚
                                </div>
                            </div>
                            <div id="send-response" class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        响应信息
                                    </h3>
                                </div>
                                <div class="panel-body" id="send-response-container"
                                     style="max-height: 500px; overflow: auto">

                                </div>
                                <div class="panel-footer">
                                    响应页脚
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


#include("./include/footer.html")

<script id="send-response-info-template" type="text/x-handlebars-template">
    <div class="row">
        <div class="col-md-12">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active">
                    <a href="#Response-Info" data-toggle="tab">
                        Info
                    </a>
                </li>
                <li><a href="#Response-Request" data-toggle="tab">Request</a></li>
                <li><a href="#Response-Response" data-toggle="tab">Response</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="Response-Info">
                    <table class="table table-hover">
                        <tbody>
                        {{#each info}}
                        <tr>
                            <td>{{this.key}}</td>
                            <td>{{this.value}}</td>
                        </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="Response-Request">
                    <table class="table table-hover">
                        <tbody>
                        {{#each request}}
                        <tr>
                            <td>{{this.key}}</td>
                            <td>{{this.value}}</td>
                        </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="Response-Response">
                    <table class="table table-hover">
                        <tbody>
                        {{#each response}}
                        <tr>
                            <td>{{this.key}}</td>
                            <td>{{this.value}}</td>
                        </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--两头渐变透明-->
    <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color="#6f5499" size="3"/>

</script>

<script>
    $(function () {
        //获取cookie
        var data = $.cookie('data');
        if (data) {
            //初始化数据
            data = JSON.parse(data)
            console.log(data);

            $('select[name="method"]').val(data.method);
            $('input[name="url"]').val(data.url);
        }

        $('#sendBtn').click(function () {
            var method = $('select[name="method"]').val();
            var url = $('input[name="url"]').val();
            var data = {"method": method, "url": url};

            //存入cookie
            $.cookie('data', JSON.stringify(data));

            layer.msg(JSON.stringify(data));

            //context数据，来自于后端的工具请求
            var context = {};
            $.post('/api/send', data, function (data, status, xhr) {
                if (data && data.result === 100 && data.data) {
                    var source = document.getElementById("send-response-info-template").innerHTML;
                    var template = Handlebars.compile(source);
                    var html = template(data.data);
                    $('#send-response-container').html(html);
                }

            });

        });
    });
</script>
</body>
</html>